<template>
    <div class="slide-bottom positionR">
        <!--我的侧边栏-->
        <div class="slide-bottom-left" ref="slideLeft">
            <div class="positionR width-height-full">
                <slot name="slideContent"></slot>
                <div class="out-icon displayFlex flexCenter">
                    <span class="out-icon-click" @click="iconShow"></span>
                    <span class="positionR">
                        <span class="slide-left-text" v-if="slideLeft.text">{{slideLeft.text}}</span>
                        <!--                <span class="iconfont icon-arrows_left" v-if="showSlide"></span>-->
                        <!--                <span class="iconfont icon-arrows_right" v-else></span>-->
                        <img class="icon-left" :class="{'icon-right':showSlide}"
                            src="../../../assets/images/store/goods_asset.png" alt="">
                    </span>
                </div>
            </div>
        </div>
        <v-bord v-if="slideLeft.bordShow && showSlide">
            <div @click="clickBord" slot="cantClick" class="com_black"></div>
        </v-bord>
    </div>
</template>

<script>
export default {
    name: "SlideLeftComponents",
    props: {
        slideLeftProp: Object,
    },
    data () {
        return {
            showSlide: false,/*@showSlide 下滑的框的出现*/
            slideLeft: {
                bordShow: true,
                // text:'分类'
            }
        }
    },
    mounted () {
        this.slideLeft = Object.assign({}, this.slideLeft, this.slideLeftProp);
        this.$refs.slideLeft.style.left = '-.8rem'
    },
    methods: {
        clickBord () {
            this.$refs.slideLeft.style.left = '-.8rem'
            this.$emit('closeSlideBottom', true);
            this.showSlide = false
        },
        showSlideBottom () {
            this.$refs.slideLeft.style.left = '0'
            this.showSlide = true;
            this.$emit('closeSlideBottom', false);
        },
        iconShow () {
            if (this.showSlide) {
                this.clickBord();
            } else {
                this.showSlideBottom();
            }
        }
    },
    components: {
        'v-bord': () => import('../../../components/commonComponents/alert/Bord'),
    },
    computed: {
        leftShow () {
            return this.$store.state.showSlide
        }
    },
    watch: {
        slideLeftProp (val) {
            this.slideLeft = Object.assign({}, this.slideLeft, val);
        },
        leftShow: function (newval, oldval) {
            if (!newval.show) {
                this.showSlide = true
                this.iconShow()
            }
        }
    },
}
</script>

<style scoped lang="scss">
.slide-bottom-left {
    width: 0.8rem;
    height: 4.5rem;
    height: 68.5vh;
    left: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    background-color: #fff;
    position: fixed;
    border-top-right-radius: 0.05rem;
    border-bottom-right-radius: 0.05rem;
    overflow: unset;
    transition: left 300ms;
}

.slide-bottom .slide-bottom-left {
    z-index: 1030;
}

.out-icon {
    right: 0;
    transform: translateX(100%);
    z-index: 1030;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 0;
    height: 0.6rem;
    font-weight: bold;
    border-top-right-radius: 0.08rem;
    border-bottom-right-radius: 0.08rem;
    transition: left 300ms;

    .icon-arrows_right,
    .icon-arrows_left {
        font-size: 0.2rem;
        vertical-align: super;
    }

    .icon-left {
        width: 0.2rem;
        box-sizing: border-box;
        padding: 0 0.03rem;
    }

    .icon-right {
        transform: rotate(180deg);
    }
}

.slide-left-text {
    display: inline-block;
    width: 0.2rem;
    position: relative;
    left: 0.12rem;
}

.animated.slideInLeft,
.animated.fadeIn,
.animated.fadeOut,
.animated.slideOutLeft {
    -webkit-animation-duration: 300ms;
    animation-duration: 300ms; // 动画执行时间
}

.slideLeft-leave-active {
    /*bottom: -5.5rem;*/
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: all 0.3s linear;
}

.slideLeft-enter-active {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    transition: all 0.3s linear;
}

.slideLeft-enter,
.slideLeft-leave-to {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

.out-icon-click {
    width: 180%;
    height: 150%;
    position: absolute;
    left: 0;
    top: 50%;
    bottom: 0;
    transform: translateY(-50%);
    z-index: 1;
}
</style>